import { Card, Form, Input, Selector } from "@/components/base";
import { Typography } from "@/components/typography";
import { Flex } from "@/components/flex";
import * as hooks from '../../hooks';
import * as dataDictionary from '@shared/constant/dataDictionary'

const { Text } = Typography;

export function ServiceDetailsForm() {
    const { isEdit } = hooks.useSearch();

    return (
        <Card>
            <Text size={16} strong style={{ display: 'block', marginBottom: '16px' }}>
                服务详情
            </Text>

            <Flex vertical >
                <Form.Item
                    label="护理师要求"
                    name="technicianLevel"
                    style={{ width: '100%', padding: 0 }}
                    rules={[{ required: true, message: '请选择护理师要求' }]}
                    getValueFromEvent={e => e[0]}
                    getValueProps={e => ({ value: [e] })}
                >
                    <Selector 
                        options={Object.entries(dataDictionary.nurseLevelStr).map(([value, label]) => ({ label, value }))}
                    />
                </Form.Item>

                <Form.Item
                    label="服务定价(元)"
                    name="cashPrice"
                    style={{ width: '100%', padding: 0 }}
                    rules={[{ required: true, message: '请输入现金价格' }]}
                >
                    <Input type="number" placeholder="请输入现金价格" />
                </Form.Item>

                <Form.Item
                    label="划卡金额(元)"
                    name="cardPrice"
                    style={{ width: '100%', padding: 0 }}
                    rules={[{ required: true, message: '请输入划卡金额' }]}
                >
                    <Input type="number" placeholder="请输入划卡金额" />
                </Form.Item>

                <Form.Item
                    label="积分"
                    name="integral"
                    style={{ width: '100%', padding: 0 }}
                    rules={[{ required: true, message: '请输入积分' }]}
                >
                    <Input type="number" placeholder="请输入积分" />
                </Form.Item>

                {isEdit && (
                    <Form.Item
                        label="服务状态"
                        name="status"
                        style={{ width: '100%', padding: 0 }}
                        getValueFromEvent={e => e[0]}
                        getValueProps={e => ({ value: [e] })}
                        rules={[{ required: true, message: '请选择服务状态' }]}
                    >
                        <Selector 
                            options={Object.entries(dataDictionary.serviceStatusStr).map(([value, label]) => ({ label, value }))}
                        />
                    </Form.Item>
                )}
            </Flex>
        </Card>
    );
} 